<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
		#l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
		#r-result{height:100%;width:20%;float:left;}
	</style>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>
	<script type="text/javascript"src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

	<title>车辆点聚合</title>
</head>
<body>
	<div id="allmap"></div>
</body>
</html>


<script type="text/javascript">
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(104.892735,35.006037);
    map.centerAndZoom(point, 6);
    map.enableScrollWheelZoom(true);

    $.get('mapdata.js', function (rs) {

		var mapdata = JSON.parse(rs);

		var markers = [];
		for (var i=0; i<mapdata.length; i++) {
			var geoCoord = mapdata[i].geoCoord;
			var pt = new BMap.Point(geoCoord[0], geoCoord[1]);
			var marker = new BMap.Marker(pt, {
			icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52, 26), {
					anchor: new BMap.Size(27, 13)
				})
			});
			markers.push(marker);
		}
		
		var markerCluster = new BMapLib.MarkerClusterer(map, {markers: markers});

    });

</script>


